<template>
  <view class="intro-modal">
    <Modal
      :visible="show"
      :title="$t('Dishwasher.Learning.Introduce.Title')"
      :ok-text="$t('APP.Common.Close.Text')"
      @ok="closeModal"
      @cancel="closeModal"
    >
      <view class="intro-swiper">
        <swiper class="swiper" :current="introIndex" @change="introSwiperChange">
          <swiper-item v-for="(intro, index) in introContents" :key="index" class="intro-item">
            <view class="intro-img">
              <image mode="aspectFit" :src="intro.img" />
            </view>
            <view class="intro-content">
              <rich-text :nodes="intro.content" />
            </view>
          </swiper-item>
        </swiper>
        <view class="swiper-dots">
          <view
            v-for="(_, index) in introContents"
            :key="index"
            class="swiper-dot"
            :class="{ active: index === introIndex }"
          />
        </view>
      </view>
    </Modal>
  </view>
</template>

<script setup lang="ts">
import Modal from '@/common/modal.vue'
import { useI18n } from 'vue-i18n'
import { requestSubscribeUsingComplete } from '@/utils/mpHelper'
import netconfig from '@/config/netconfig'

const props = defineProps<{
  show: boolean
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'close'): void
}>()
const i18n = useI18n()

async function closeModal() {
  await requestSubscribeUsingComplete([netconfig.DeviceStateId])
  emit('update:show', false)
  emit('close')
}

const introContents = computed(() => [
  // 工作流程介绍
  {
    img: i18n.t('Appliance.Dishwasher.Learning.Intro.Workflow1.Image'),
    content: i18n.t('Dishwasher.Learning.Introduce.Step1.Text'),
  },
  {
    img: i18n.t('Appliance.Dishwasher.Learning.Intro.Workflow2.Image'),
    content: i18n.t('Dishwasher.Learning.Introduce.Step2.Text'),
  },
  {
    img: i18n.t('Appliance.Dishwasher.Learning.Intro.Workflow3.Image'),
    content: i18n.t('Dishwasher.Learning.Introduce.Step3.Text'),
  },
  {
    img: i18n.t('Appliance.Dishwasher.Learning.Intro.Workflow4.Image'),
    content: i18n.t('Dishwasher.Learning.Introduce.Step4.Text'),
  },
])
const introIndex = ref(0)
function introSwiperChange(e: WechatMiniprogram.SwiperChange) {
  introIndex.value = e.detail.current
}
// 打开时重置swiperIndex
watch(
  () => props.show,
  (show) => {
    show && (introIndex.value = 0)
  }
)
</script>

<style scoped lang="less">
.intro-swiper {
  .swiper {
    width: 100%;
    height: 448rpx;
  }
  .swiper-dots {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-dot {
    width: 12rpx;
    height: 4rpx;
    background-color: #333333;
    opacity: 0.2;
    transition: opacity 0.2s ease;
    &.active {
      opacity: 1;
    }
    + .swiper-dot {
      margin-left: 6rpx;
    }
  }
}
.intro-item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.intro-img {
  height: 304rpx;
  margin-bottom: 20rpx;
  > image {
    width: 100%;
    height: 100%;
  }
}
.intro-content {
  font-weight: 400;
  font-size: 28rpx;
  line-height: 40rpx;
  text-align: center;
  color: #212121;
}
</style>
